<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>我的收藏</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" />
    <!-- 样式 -->
    <link rel="stylesheet" href="../../css/style.css" />
    <!-- 主题（主要颜色设置） -->
    <link rel="stylesheet" href="../../css/theme.css" />
    <!-- 通用的css -->
    <link rel="stylesheet" href="../../css/common.css" />
    <style>
      #swiper {
        overflow: hidden;
      }

      #swiper .layui-carousel-ind li {
        width: 20px;
        height: 10px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.3);
        border-radius: 6px;
        background-color: #f7f7f7;
        box-shadow: 0 0 6px rgba(255, 0, 0, 0.8);
      }

      #swiper .layui-carousel-ind li.layui-this {
        width: 30px;
        height: 10px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.3);
        border-radius: 6px;
        background-color: rgba(255, 183, 196, 1);
        box-shadow: 0 0 6px rgba(255, 0, 0, 0.8);
      }

      .index-title {
        text-align: center;
        box-sizing: border-box;
        width: 980px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      .layui-laypage .layui-laypage-count {
        padding: 0 10px;
      }

      .layui-laypage .layui-laypage-skip {
        padding-left: 10px;
      }

      .data-list {
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }

      .data-item {
        width: calc(25% - 15px);
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        cursor: pointer;
      }

      .data-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      .data-item .cover {
        width: 100%;
        height: 200px;
        object-fit: cover;
      }

      .data-item .info {
        padding: 15px;
      }

      .data-item .title {
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .data-item .type {
        font-size: 14px;
        color: #666;
        margin-bottom: 5px;
      }

      .data-item .time {
        font-size: 12px;
        color: #999;
      }

      .data-item .operate {
        display: flex;
        justify-content: flex-end;
        padding: 10px 15px;
        border-top: 1px solid #eee;
      }

      .search-form {
        padding: 20px;
        background: #fff;
        border-radius: 8px;
        margin-bottom: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .empty-tip {
        text-align: center;
        padding: 40px;
        color: #999;
        font-size: 16px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!-- 轮播图 -->
      <!-- <div class="layui-carousel" id="swiper" :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
			<div carousel-item id="swiper-item">
				<div v-for="(item,index) in swiperList" :key="index">
					<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
				</div>
			</div>
		</div> -->
      <!-- 轮播图 -->

      <div class="center-container">
        <!-- 个人中心菜单 -->
        <div
          class="left-container"
          :style='{"padding":"0","boxShadow":"0px ","margin":"0","borderColor":"rgba(255, 183, 196, 1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0px ","width":"160px","borderStyle":"solid"}'
        >
          <ul class="layui-nav layui-nav-tree">
            <li
              v-for="(item,index) in centerMenu"
              v-bind:key="index"
              class="layui-nav-item"
              :class="item.url=='../storeup/center.html'?'layui-this':''"
            >
              <a :href="'javascript:jump(\''+item.url+'\')'">{{item.name}}</a>
            </li>
          </ul>
        </div>
        <!-- 个人中心菜单 -->

        <!-- 个人中心 -->
        <div
          class="right-container"
          :style='{"padding":"20px","boxShadow":"0px 0px 0px rgba(255,0,0,.3)","margin":"0","borderColor":"rgba(255,0,0,.3)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'
        >
          <!-- 搜索栏 -->
          <div class="search-form">
            <form class="layui-form">
              <div class="layui-inline">
                <label class="layui-form-label">名称搜索</label>
                <div class="layui-input-inline">
                  <input
                    type="text"
                    name="name"
                    id="name"
                    placeholder="输入收藏名称"
                    class="layui-input"
                  />
                </div>
              </div>
              <div class="layui-inline">
                <button
                  type="button"
                  class="layui-btn layui-btn-normal"
                  @click="search"
                >
                  <i class="layui-icon layui-icon-search"></i> 搜索
                </button>
              </div>
            </form>
          </div>

          <!-- 收藏列表 -->
          <div v-if="dataList.length > 0" class="data-list">
            <div
              v-for="(item,index) in dataList"
              :key="index"
              class="data-item"
            >
              <img
                class="cover"
                :src="item.picture"
                @click="jump('../'+item.tablename+'/detail.html?id='+item.refid)"
              />
              <div class="info">
                <h3 class="title">{{item.name}}</h3>
                <div class="type">类型：{{item.tablename}}</div>
                <div class="time">收藏时间：{{item.addtime}}</div>
              </div>
              <div class="operate">
                <button
                  class="layui-btn layui-btn-danger layui-btn-xs"
                  @click="deleteItem(item.id)"
                >
                  <i class="layui-icon layui-icon-delete"></i> 取消收藏
                </button>
              </div>
            </div>
          </div>
          <div v-else class="empty-tip">
            <i
              class="layui-icon layui-icon-face-cry"
              style="font-size: 30px"
            ></i>
            <p>暂无收藏内容</p>
          </div>

          <!-- 分页 -->
          <div
            class="pager"
            id="pager"
            :style="{textAlign:1==1?'left':1==2?'center':'right'}"
          ></div>
        </div>
        <!-- 个人中心 -->
      </div>
    </div>

    <!-- layui -->
    <script src="../../layui/layui.js"></script>
    <!-- vue -->
    <script src="../../js/vue.js"></script>
    <!-- 组件配置信息 -->
    <script src="../../js/config.js"></script>
    <!-- 扩展插件配置信息 -->
    <script src="../../modules/config.js"></script>
    <!-- 工具方法 -->
    <script src="../../js/utils.js"></script>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          // 轮播图
          swiperList: [
            {
              img: "../../img/banner.jpg",
            },
          ],
          centerMenu: centerMenu,
          dataList: [],
          searchName: "",
        },
        methods: {
          jump(url) {
            jump(url);
          },
          search() {
            this.searchName = jquery("#name").val();
            pageList();
          },
          deleteItem(id) {
            var _this = this;
            layer.confirm(
              "确定要取消收藏吗？",
              {
                btn: ["确定", "取消"],
              },
              function () {
                layui.http.requestJson(
                  "storeup/delete",
                  "post",
                  [id],
                  function (res) {
                    layer.msg("取消成功", {
                      time: 1000,
                      icon: 1,
                    });
                    // 直接从列表中移除该项
                    _this.dataList = _this.dataList.filter(
                      (item) => item.id !== id
                    );
                  }
                );
              }
            );
          },
        },
      });

      layui.use(
        ["layer", "element", "carousel", "laypage", "http", "jquery"],
        function () {
          var layer = layui.layer;
          var element = layui.element;
          var carousel = layui.carousel;
          var laypage = layui.laypage;
          var http = layui.http;
          var jquery = layui.jquery;

          var limit = 8;

          // 获取收藏列表
          function pageList() {
            var param = {
              page: 1,
              limit: limit,
              userid: localStorage.getItem("userid"),
            };
            if (vue.searchName) {
              param["name"] = "%" + vue.searchName + "%";
            }
            // 获取列表数据
            http.request("storeup/list", "get", param, function (res) {
              vue.dataList = res.data.list;
              // 分页
              laypage.render({
                elem: "pager",
                count: res.data.total,
                limit: limit,
                groups: 3,
                layout: ["prev", "page", "next"],
                theme: "#ffb7c4",
                jump: function (obj, first) {
                  param.page = obj.curr;
                  //首次不执行
                  if (!first) {
                    http.request("storeup/list", "get", param, function (res) {
                      vue.dataList = res.data.list;
                    });
                  }
                },
              });
            });
          }
          pageList();
        }
      );
    </script>
  </body>
</html>
